<template>
  <view class="class">
    <van-notice-bar
      scrollable
      color="#1989fa"
      background="#ecf9ff"
      left-icon="bulb-o"
      mode="closeable"
      :text="noticebartext"
    />
    <t-table border="0" @change="change">
      <t-tr font-size="14" color="#95b99e">
        <t-th align="center">周一</t-th>
        <t-th align="center">周二</t-th>
        <t-th align="center">周三</t-th>
        <t-th align="center">周四</t-th>
        <t-th align="center">周五</t-th>
      </t-tr>
      <t-tr font-size="14" color="#95b99e" align="center">
        <t-th v-for="item in tablelist1" :key="item._id">{{
          item.c_name
        }}</t-th>
      </t-tr>
      <t-tr font-size="14" color="#95b99e" align="center">
        <t-th v-for="item in tablelist2" :key="item._id">{{
          item.c_name
        }}</t-th>
      </t-tr>
      <t-tr font-size="14" color="#95b99e" align="center">
        <t-th v-for="item in tablelist3" :key="item._id">{{
          item.c_name
        }}</t-th>
      </t-tr>
      <t-tr font-size="14" color="#95b99e" align="center">
        <t-th v-for="item in tablelist4" :key="item._id">{{
          item.c_name
        }}</t-th>
      </t-tr>
      <t-tr font-size="14" color="#95b99e" align="center">
        <t-th v-for="item in tablelist5" :key="item._id">{{
          item.c_name
        }}</t-th>
      </t-tr>
    </t-table>
    <view>
      <t-table border="0" @change="change">
        <t-tr
          font-size="14"
          color="#95b99e"
          align="center"
          v-for="item in Exlist"
          :key="item._id"
        >
          <t-td>{{ item.c_name }}</t-td>
          <t-td>{{ item.c_teacher }}</t-td>
          <t-td>{{ item.c_place }}</t-td>
        </t-tr>
      </t-table>
    </view>
    <van-button type="primary" @click="OpenAdd" block>查询详情</van-button>
    <van-dialog
      title="查询提示"
      message="使用选择表框来确定要查询的详情页"
      :show="shownotice"
      @close="onClose"
      show-cancel-button
    />
    <van-popup
      :show="showAdd"
      @close="CloseAdd"
      round
      custom-style="height: 50%"
      position="bottom"
    >
      <van-cell-group inset>
        <van-picker :columns="columns" @change="onC_Picker" />
        <van-button type="primary" @click="Opendetail" block>查询</van-button>
      </van-cell-group>
    </van-popup>
    <van-popup
      :show="showdetail"
      @close="Closedetail"
      round
      position="top"
      custom-style="height: 50%"
    >
      <van-cell-group inset>
        <van-cell title="课程名:" :value="classname" centor />
        <van-cell title="课程老师:" :value="teacher" centor />
        <van-cell title="课程地点:" :value="place" centor />
        <van-cell title="课程时间:" :value="Rtime" centor />
        <van-button type="primary" @click="Openadd" block>修改</van-button>
      </van-cell-group>
    </van-popup>
    <van-popup
      :show="showadd"
      @close="Closeadd"
      round
      custom-style="height: 60%"
      position="top"
    >
      <van-cell-group inset>
        <van-field
          placeholder="请输入课程名"
          border="false"
          @change="onC_Name"
        />
        <van-field
          placeholder="请输入老师姓名"
          border="false"
          @change="onC_Teacher"
        />
        <van-picker :columns="plist" @change="onC_Picker2" />
        <van-button type="primary" @click="Reback" round block
          >确认修改</van-button
        >
      </van-cell-group>
    </van-popup>
    <view class="bgp" v-show="showcircle">
    <van-circle
      class="circle"
      :value="Circlecolor"
      :color="gradientColor"
      speed = "100"
      size="240"
      :text="Circletext"
      :clockwise="false"
      stroke-width=20
    />
    </view>
  </view>
</template>

<script>
import tTable from "./components/xiri-table.vue";
import tTh from "./components/xiri-th.vue";
import tTr from "./components/xiri-tr.vue";
import tTd from "./components/xiri-td.vue";
//picker使用的数据表
const timetable = {
  周一: ["第一节课", "第二节课", "第三节课", "第四节课", "第五节课"],
  周二: ["第一节课", "第二节课", "第三节课", "第四节课", "第五节课"],
  周三: ["第一节课", "第二节课", "第三节课", "第四节课", "第五节课"],
  周四: ["第一节课", "第二节课", "第三节课", "第四节课", "第五节课"],
  周五: ["第一节课", "第二节课", "第三节课", "第四节课", "第五节课"],
};
const placelist = {
  非实验: [
    "主楼A",
    "主楼B",
    "主楼C",
    "主楼D",
    "主楼E",
    "中1楼",
    "中2楼",
    "中3楼",
    "外文楼",
  ],
  实验: ["仲英楼", "北小楼", "数学楼"],
};
export default {
  data() {
    return {
      Circletext:"",
      Circlecolor: 0,
      gradientColor: {
        "0%": "#F0FF00",
        "100%": "#58CFFB",
      },
      noticebartext: "",
      classname: "", //输入内容以及显示内容的变量声明
      Cweek: 1,
      Ctime: 3,
      Rtime: "", //详情页展示的时间
      teacher: "",
      place: "",
      Isex: false,
      showcircle:true,
      showAdd: false, //第一层popup
      showadd: false, //第二层popup
      shownotice: false, //提示弹出的控制变量
      showdetail: false, //查看详情页的控制变量
      tablelist1: [], //课时为1的课表列
      tablelist2: [],
      tablelist3: [],
      tablelist4: [],
      tablelist5: [],
      Exlist: [], //实验课表列
      user: "",
      //修改信息时的地点和课程类型
      plist: [
        {
          values: Object.keys(placelist),
          className: "column1",
          defaultIndex: 0,
        },
        {
          values: placelist["实验"],
          className: "column2",
          defaultIndex: 2,
        },
      ],
      //picker回传的参数信息
      columns: [
        {
          values: Object.keys(timetable),
          className: "column1",
        },
        {
          values: timetable["周一"],
          className: "column2",
          defaultIndex: 2,
        },
      ],
    };
  },
  components: {
    tTable,
    tTh,
    tTr,
    tTd,
  },
  mounted() {
    this.getuser();
    this.getNoticeBar();
    this.gettablelist();
    this.getCircleBar();
  },
  onPullDownRefresh() {
    //刷新后的效果
    setTimeout(() => {
      this.gettablelist();
      uni.stopPullDownRefresh();
    }, 2000);
  },
  methods: {
    onC_Picker2(event) {
      const { picker, value, index } = event.detail;
      picker.setColumnValues(1, placelist[value[0]]);
      this.place = picker.getColumnValue(1);
      let num = picker.getColumnIndex(0);
      if (num == 1) {
        this.Isex = true;
      } else this.Isex = false;
      console.log(this.place);
      console.log(this.Isex);
    },
    //拿到所输入的week和time信息
    onC_Picker(event) {
      const { picker, value, index } = event.detail;
      picker.setColumnValues(1, timetable[value[0]]);
      this.Cweek = picker.getColumnIndex(0) + 1;
      this.Ctime = picker.getColumnIndex(1) + 1;
      console.log(this.Cweek + " " + this.Ctime);
    },
    Closedetail() {
      this.showdetail = false;
      this.showcircle = true;
    },
    Opendetail() {
      this.getDetail();
      this.showdetail = true;
      this.showAdd = false;
    },
    onClose() {
      this.shownotice = false;
    },
    onC_ifEx(event) {
      this.radio = event.detail;
    },
    onClick(event) {
      const { name } = event.currentTarget.dataset;
      this.radio = name;
    },
    onC_Teacher(event) {
      this.teacher = event.detail;
    },
    onC_Name(event) {
      // event.detail 为当前输入的值
      this.classname = event.detail;
    },
    Closeadd() {
      this.showadd = false;
      this.showcircle = true;
    },
    Openadd() {
      this.showadd = true;
      this.showdetail = false;
    },
    OpenAdd() {
      this.showAdd = true;
      this.shownotice = true;
      this.showcircle = false;
    },
    CloseAdd() {
      this.showAdd = false;
      this.showcircle = true;
    },
    //执行修改
    Reback() {
      this.ghrequest
        .run("excUpdate", {
          week: this.Cweek,
          time: this.Ctime,
          teacher: this.teacher,
          place: this.place,
          name: this.classname,
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.error(err);
        });
      this.showadd = false;
      this.showcircle = true;
      uni.startPullDownRefresh();
    },
    //获取详情信息
    getDetail() {
      this.ghrequest
        .run("getdetail", { week: this.Cweek, time: this.Ctime })
        .then((res) => {
          this.classname = res.name;
          this.teacher = res.teacher;
          this.place = res.place;
          this.Rtime = res.rtime;
          console.log(this.classname);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //获取顶部小提示信息
    getNoticeBar() {
      this.ghrequest
        .run("getNoticeBar")
        .then((res) => {
          this.noticebartext = res;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //获取圆圈提示信息
    getCircleBar() {
      this.ghrequest
        .run("getCircle")
        .then((res) => {
          this.Circletext = res.text;
          this.Circlecolor = res.value;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //获取课表数据
    gettablelist() {
      this.ghrequest.run("getClass", { num: 1 }).then((res) => {
        this.tablelist1 = res;
      }),
        this.ghrequest.run("getClass", { num: 2 }).then((res) => {
          this.tablelist2 = res;
        }),
        this.ghrequest.run("getClass", { num: 3 }).then((res) => {
          this.tablelist3 = res;
        }),
        this.ghrequest.run("getClass", { num: 4 }).then((res) => {
          this.tablelist4 = res;
        }),
        this.ghrequest.run("getClass", { num: 5 }).then((res) => {
          this.tablelist5 = res;
        }),
        this.ghrequest.run("getExper").then((res) => {
          this.Exlist = res;
        });
    },
    getuser() {
      this.ghrequest
        .run("getUserInfo")
        .then((res) => {
          this.user = res;
          console.log(res);
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>

<style>
.circle {
  margin-left: 60px;
}
.bgp{
  background-color: #C2FFD8;
  position: relative;
   bottom: -50px;
   top:0px;
}
</style>